<template>
	<view class="group-add-container">
		<view class="header flex flex-direction align-center">
			<view class="tip">您即将创建下线，请仔细填写下列表单项</view>
		</view>
		<view class="form-group">
			<uni-forms ref="form" :rules="rules" :modelValue="formData" validate-trigger="blur" label-position="top"
				err-show-type="toast">
				<uni-forms-item label="登录帐号" required name="loginName">
					<uni-icons custom-prefix="iconfont" type="icon-user" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.loginName" type="text" maxlength="20" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入登录帐号" />
				</uni-forms-item>

				<uni-forms-item label="用户昵称" required name="sellerName">
					<uni-icons custom-prefix="iconfont" type="icon-nicheng" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.sellerName" type="text" maxlength="20" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入用户昵称" />
				</uni-forms-item>

				<!-- <uni-forms-item label="下线配额" name="quota">
					<uni-icons custom-prefix="iconfont" type="icon-renminbi" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.quota" type="digit" maxlength="20" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入配额" />
				</uni-forms-item> -->

				<uni-forms-item label="谷歌验证码" required name="code">
					<uni-icons custom-prefix="iconfont" type="icon-gugeyanzhengma" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.code" type="digit" maxlength="10" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入谷歌验证码" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="form-btn-box">
			<button @click="submit('form')" class="login-btn cu-btn block bg-blue lg">立即创建</button>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		create
	} from '@/api/seller/myTeam.js'
	export default {
		data() {
			return {
				// 数据源
				formData: {
					loginName: '',
					sellerName: '',
					quota: '',
					code: ''
				},
				// 规则
				rules: {
					loginName: {
						rules: [{
							required: true,
							errorMessage: '请输入登录帐号'
						}]
					},
					sellerName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户昵称'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入谷歌验证码'
						}]
					}
				}
			}
		},
		methods: {
			// 提交
			submit(ref) {
				const self = this
				this.$refs[ref].validate((err, value) => {
					if (!err) {
						create(this.formData.code, _.omit(this.formData, 'code')).then(() => {
							uni.showModal({
								title: '系统提示',
								content: `下线 [${this.formData.loginName}] 创建成功，是否继续创建？`,
								cancelText: '退出创建',
								confirmText: '继续创建',
								success: function(res) {
									if (res.confirm) {
										self.formData = {
											loginName: '',
											sellerName: '',
											code: ''
										}
									} else {
										self.$tab.navigateBack()
									}
								}
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.group-add-container {
		background-color: #ffffff;
		/* #ifdef H5 */
		min-height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		/* #endif */

		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */

		.header {
			padding: 10% 0;
			margin-bottom: 10rpx;

			.tip {
				color: #999;
				font-size: 28rpx;
			}
		}

		.form-group {
			padding: 0 60rpx 0 60rpx;

			&::v-deep {
				.uni-forms-item {
					margin-bottom: 28rpx;
					
					.uni-forms-item__label {
						font-size: 28rpx;
						// justify-content: flex-end !important;
						white-space: nowrap;
						width: 100% !important;
						color:#121212;
						
					}

					.uni-forms-item__content {
						border-radius: 50rpx;
						background-color: #f5f6f7;
						display: flex;
						align-items: center;
						padding: 5rpx 24rpx;
					}

					.is-required {
						margin-top: 10rpx;
					}
				}
			}
		}

		.form-btn-box {
			padding: 180rpx 80rpx 40rpx;

			button {
				border-radius: 80rpx;
			}
		}
	}
</style>